<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>打印测试</title>
    <style>
        body { margin: 0; }
        .waybill_area { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_back { position: relative; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_back img { width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_design { position: absolute; left: 0; top: 0; width: {$waybill_info.waybill_pixel_width}px; height: {$waybill_info.waybill_pixel_height}px; }
        .waybill_item { position: absolute; left: 0; top: 0; width:100px; height: 20px; border: 1px solid #CCCCCC; }
    </style>
</head>
<body>
<div class="waybill_back">
    <img src="{present name="waybill_info.waybill_image_url"}{$waybill_info.waybill_image_url}{/present}" alt="">
</div>
<div class="waybill_design">
    {notempty name="waybill_info.waybill_data"}
    {foreach name="waybill_info.waybill_data" item="value"}
    {present name="value.check"}
    <div class="waybill_item" style="left:{$value.left}px; top:{$value.top}px; width:{$value.width}px; height:{$value.height}px;">{$value.content}</div>
    {/present}
    {/foreach}
    {/notempty}
</div>
<div class="control">
    <a id="btn" href="javascript:;">打印</a>
</div>
<script src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#btn').on('click', function() {
            pos();

            $('.waybill_back').hide();
            $('.control').hide();

            window.print();
        });

        var pos = function () {
            var top = {$waybill_info.waybill_pixel_top};
            var left = {$waybill_info.waybill_pixel_left};

            $(".waybill_design").each(function(index) {
                var offset = $(this).offset();
                var offset_top = offset.top + top;
                var offset_left = offset.left + left;
                $(this).offset({ top: offset_top, left: offset_left})
            });
        };
    });
</script>

</body>
</html>